<script>
import { getBannerList, delBanner } from '@/api/banner'
export default {
    name: 'bannerList',
    data() {
        return {
            bannerList: []
        }
    },
    mounted() {
        getBannerList().then(res => {
            // console.log(res.data);
            this.bannerList = res.data
        })
    },
    methods: {
        delBannerClick(banner) {
            // console.log(banner);
            delBanner({
                bannerid: banner.bannerid
            }).then(res => {
                console.log(res);
                if (res.code == 200) {
                    // 删除成功后重新获取列表数据
                    getBannerList().then(res => {
                        this.bannerList = res.data
                    })
                } else {
                    // 删除失败
                    ElMessage.error('温馨提示：轮播图数据删除失败，请稍后再试！')
                }
            })
        }
    }
}
</script>
<template>
    <h2>轮播图列表</h2>
    <el-table height="550" :data="bannerList" style="width: 100%">
        <el-table-column label="序号" type="index" width="180" />
        <el-table-column prop="img" label="图片">
            <template #default="scope">
                <el-image style="width: 150px; height: 100px;" :src="scope.row.img"></el-image>
            </template>
        </el-table-column>
        <el-table-column prop="link" label="链接" />
        <el-table-column prop="alt" label="提示内容" />
        <el-table-column label="操作">
            <template #default="scope">
                <el-popconfirm @confirm="delBannerClick(scope.row)" title="您确定要删除这张美丽的轮播图吗?" confirm-button-text="确定"
                    cancel-button-text="取消">
                    <template #reference>
                        <el-button> 删除 </el-button>
                    </template>
                </el-popconfirm>
            </template>
        </el-table-column>
    </el-table>
</template>